<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript">
    $(function () {
        console.log("cartsJS.jsp run");
        // 对订单的操作
        orderItem();

        // 结算
        // settlement();
    });

    /**
     * 结算
     * 当选择了商品，点击结算时，进行结算
     **/
    function settlement() {
        console.log("settlement run");

        // “结算按钮” 如果存在"btn_sty"属性，说明已经有商品勾选了，要进行结算
        // if (!$("#settlement").hasClass("btn_sty")) {
        //     console.log("is not has class");
        //     return;
        // }
        console.log("has class");
        var gids = "";
        // 获取所有条目的复选框按钮，判断是否被选择，如果选择了，生成订单
        $(".order_content .list_chk").each(function () {
            // 当选择了条目时，获取gid
            if ($(this).children("label").hasClass("mark")) {
                var idValue = $(this).children("input").attr("id"); // <input>标签的id属性存放了gid，字符串以“checkbox_”开头
                var gid = idValue.substring(9);

                gids += gid + ",";
            }
        });
        gids = gids.substring(0, gids.length - 1);

        // 发送请求，生成订单
        var url = "${pageContext.request.contextPath}/OrderServlet";
        var args = {
            method: "generateOrder",
            gids: gids
        };
        $.StandardPost(url, args);
        console.log("send end !");
    }

    $.extend({
        StandardPost: function (url, args) {
            var form = $("<form method='post'></form>");
            var input;
            form.attr({ "action": url });
            $.each(args, function (key, value) {
                input = $("<input type='hidden'>");
                input.attr({ "name": key });
                input.val(value);
                form.append(input);
            });
            $(document.body).append(form);
            form.submit();
        }
    });



    /**
    * 对订单的操作
    **/
    function orderItem() {
        //全局的checkbox选中和未选中的样式
        var $allCheckbox = $('input[type="checkbox"]'),     //全局的全部checkbox
            $wholeChexbox = $('.whole_check'),
            $cartBox = $('.cartBox'),                       //每个商铺盒子
            $shopCheckbox = $('.shopChoice'),               //每个商铺的checkbox
            $sonCheckBox = $('.son_check');                 //每个商铺下的商品的checkbox
        $allCheckbox.click(function () {
            if ($(this).is(':checked')) {
                $(this).next('label').addClass('mark');
            } else {
                $(this).next('label').removeClass('mark');
            }
        });

        //===============================================全局全选与单个商品的关系================================
        $wholeChexbox.click(function () {
            var $checkboxs = $cartBox.find('input[type="checkbox"]');
            if ($(this).is(':checked')) {
                $checkboxs.prop("checked", true);
                $checkboxs.next('label').addClass('mark');
            } else {
                $checkboxs.prop("checked", false);
                $checkboxs.next('label').removeClass('mark');
            }
            totalMoney();
        });


        $sonCheckBox.each(function () {
            $(this).click(function () {
                if ($(this).is(':checked')) {
                    //判断：所有单个商品是否勾选
                    var len = $sonCheckBox.length;
                    var num = 0;
                    $sonCheckBox.each(function () {
                        if ($(this).is(':checked')) {
                            num++;
                        }
                    });
                    if (num == len) {
                        $wholeChexbox.prop("checked", true);
                        $wholeChexbox.next('label').addClass('mark');
                    }
                } else {
                    //单个商品取消勾选，全局全选取消勾选
                    $wholeChexbox.prop("checked", false);
                    $wholeChexbox.next('label').removeClass('mark');
                }
            });
        });

        //=======================================每个店铺checkbox与全选checkbox的关系/每个店铺与其下商品样式的变化===================================================

        //店铺有一个未选中，全局全选按钮取消对勾，若店铺全选中，则全局全选按钮打对勾。
        $shopCheckbox.each(function () {
            $(this).click(function () {
                if ($(this).is(':checked')) {
                    //判断：店铺全选中，则全局全选按钮打对勾。
                    var len = $shopCheckbox.length;
                    var num = 0;
                    $shopCheckbox.each(function () {
                        if ($(this).is(':checked')) {
                            num++;
                        }
                    });
                    if (num == len) {
                        $wholeChexbox.prop("checked", true);
                        $wholeChexbox.next('label').addClass('mark');
                    }

                    //店铺下的checkbox选中状态
                    $(this).parents('.cartBox').find('.son_check').prop("checked", true);
                    $(this).parents('.cartBox').find('.son_check').next('label').addClass('mark');
                } else {
                    //否则，全局全选按钮取消对勾
                    $wholeChexbox.prop("checked", false);
                    $wholeChexbox.next('label').removeClass('mark');

                    //店铺下的checkbox选中状态
                    $(this).parents('.cartBox').find('.son_check').prop("checked", false);
                    $(this).parents('.cartBox').find('.son_check').next('label').removeClass('mark');
                }
                totalMoney();
            });
        });


        //========================================每个店铺checkbox与其下商品的checkbox的关系======================================================

        //店铺$sonChecks有一个未选中，店铺全选按钮取消选中，若全都选中，则全选打对勾
        $cartBox.each(function () {
            var $this = $(this);
            var $sonChecks = $this.find('.son_check');
            $sonChecks.each(function () {
                $(this).click(function () {
                    if ($(this).is(':checked')) {
                        //判断：如果所有的$sonChecks都选中则店铺全选打对勾！
                        var len = $sonChecks.length;
                        var num = 0;
                        $sonChecks.each(function () {
                            if ($(this).is(':checked')) {
                                num++;
                            }
                        });
                        if (num == len) {
                            $(this).parents('.cartBox').find('.shopChoice').prop("checked", true);
                            $(this).parents('.cartBox').find('.shopChoice').next('label').addClass('mark');
                        }

                    } else {
                        //否则，店铺全选取消
                        $(this).parents('.cartBox').find('.shopChoice').prop("checked", false);
                        $(this).parents('.cartBox').find('.shopChoice').next('label').removeClass('mark');
                    }
                    totalMoney();
                });
            });
        });


        //=================================================商品数量==============================================
        var $plus = $('.plus'),
            $reduce = $('.reduce'),
            $all_sum = $('.sum');
        // 增加商品数量
        $plus.click(function () {
            var $inputVal = $(this).prev('input'),
                $count = parseInt($inputVal.val()) + 1,
                $obj = $(this).parents('.amount_box').find('.reduce'),
                $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
                $price = $(this).parents('.order_lists').find('.price').html(),  //单价
                $priceTotal = $count * parseFloat($price.substring(1)); // 条目小计

            $inputVal.val($count);
            $priceTotalObj.html('￥' + $priceTotal.toFixed(2));
            if ($inputVal.val() > 1 && $obj.hasClass('reSty')) {
                $obj.removeClass('reSty');
            }
            totalMoney();
        });

        // 减少商品数量
        $reduce.click(function () {
            var $inputVal = $(this).next('input'),
                $count = parseInt($inputVal.val()) - 1,
                $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
                $price = $(this).parents('.order_lists').find('.price').html(),  //单价
                $priceTotal = $count * parseFloat($price.substring(1)); // 条目小计
            if ($inputVal.val() > 1) {
                $inputVal.val($count);
                $priceTotalObj.html('￥' + $priceTotal.toFixed(2));
            }
            if ($inputVal.val() == 1 && !$(this).hasClass('reSty')) {
                $(this).addClass('reSty');
            }
            totalMoney();
        });

        $all_sum.keyup(function () {
            var $count = 0,
                $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
                $price = $(this).parents('.order_lists').find('.price').html(),  //单价
                $priceTotal = 0;
            if ($(this).val() == '') {
                $(this).val('1');
            }
            $(this).val($(this).val().replace(/\D|^0/g, ''));
            $count = $(this).val();
            $priceTotal = $count * parseInt($price.substring(1));
            $(this).attr('value', $count);
            $priceTotalObj.html('￥' + $priceTotal);
            totalMoney();
        })

        //======================================移除商品========================================

        var $order_lists = null;
        var $order_content = '';
        $('.delBtn').click(function () {
            $order_lists = $(this).parents('.order_lists');
            $order_content = $order_lists.parents('.order_content');
            $('.model_bg').fadeIn(300);
            $('.my_model').fadeIn(300);
        });

        // 关联 关闭模态框 事件：点击了关闭按钮
        $('.closeModel').click(function () {
            closeM();
        });
        $('.dialog-close').click(function () {
            closeM();
        });
        // 关闭模态框
        function closeM() {
            $('.model_bg').fadeOut(300);
            $('.my_model').fadeOut(300);
        }
        //确定按钮，移除商品
        $('.dialog-sure').click(function () {

            // 获取gid删除购物车中的商品
            var id = $order_lists.find(".son_check").attr("id");
            var gid = id.substring(9);

            // 进行异步删除商品
            $.ajax({
                type: "POST",// 请求的方式默认为get 改为Post
                url: "${pageContext.request.contextPath}/CartServlet",// 往服务器端请求的地址 写成绝对路径
                data: {
                    method: "removeItem",
                    gid: gid
                },// 往服务器端发送的数据
                // 接受服务器端数据函数 回调函数
                success: function (data) {
                    // data是服务器返回的数据
                    if (data) {

                        $order_lists.remove();
                        if ($order_content.html().trim() == null || $order_content.html().trim().length == 0) {
                            $order_content.parents('.cartBox').remove();
                        }
                        closeM();
                        $sonCheckBox = $('.son_check');
                        totalMoney();

                    } else {
                        if (confirm("您还未登录，在登录后才能加入购物车，是否去登录？")) {
                            location = "${pageContext.request.contextPath}/jsps/users/login.jsp";
                        }
                    }
                }
            });

        });

        //======================================总计==========================================

        function totalMoney() {

            var total_money = 0;
            var total_count = 0;
            var calBtn = $('.calBtn a');
            $sonCheckBox.each(function () {
                if ($(this).is(':checked')) {
                    // 得到商品价格
                    var price = parseFloat($(this).parents('.order_lists').find('.list_price').find('.price').text().substring(1));
                    // 得到商品需要购买的数量
                    var num = parseInt($(this).parents('.order_lists').find('.sum').val());

                    total_money += price * num;
                    total_count += num;
                }
            });
            $('.total_text').html('￥' + total_money.toFixed(2)); // 设置商品总计
            $('.piece_num').html(total_count); // 设置商品数量

            // console.log(total_money,total_count);

            if (total_money != 0 && total_count != 0) {
                if (!calBtn.hasClass('btn_sty')) {
                    calBtn.addClass('btn_sty');
                }
            } else {
                if (calBtn.hasClass('btn_sty')) {
                    calBtn.removeClass('btn_sty');
                }
            }
        }
    }

</script>